<template>
  <view class="container">
    <!-- Background pattern -->
    <view class="background-pattern">
      <view v-for="(_, index) in 20" :key="index" class="background-circle" :style="getRandomStyle(index)"></view>
    </view>

    <view class="content">
      <view class="logo-container   ">
        <image src="/static/logo.png" mode="aspectFit" class="logo  "></image>
      </view>

      <text class="welcome-text">欢迎使用才风后台小程序!</text>
      
      <text class="description-text">请授权登录以体验更多精彩功能</text>
      
   <!--   <tn-button width="100%" size="lg" bg-color="tn-teal-dark"    open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber">
        <tn-icon name="wechat" class="wechat-icon"> </tn-icon>
        <text>微信授权登录</text>
      </tn-button> -->
      <tn-button width="100%" size="xl" bg-color="tn-teal-dark"  type="success"
            @click="handleLogin">
        <tn-icon name="wechat"  > </tn-icon>
        <text>微信授权登录</text>
      </tn-button>

<!--      <tn-button width="100%" size="xl" bg-color="tn-teal-dark"  type="success" @click='getPhoneNumber'>-->
<!--        <tn-icon name="wechat"  > </tn-icon>-->
<!--        <text>一键授权手机号</text>-->
<!--      </tn-button>-->
    </view>

    <view class="footer-text">
      <text>登录即表示您同意我们的</text>
      <text>\n</text>
      <text class="link" @click="openTerms">服务条款</text>
      <text> 和 </text>
      <text class="link" @click="openPrivacy">隐私政策</text>
    </view>

    <!-- Decorative elements -->
    <view class="decorative-circle bottom-left"></view>
    <view class="decorative-circle top-right"></view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import cfsheep from "@/cfsheep";
import $platform from '@/cfsheep/platform/index.js'; 
const isLogin = ref(false);


const circles = ref([])

const getRandomStyle = (index: any) => {
  if (!circles.value[index]) {
    circles.value[index] = {
      top: `${Math.random() * 100}%`,
      left: `${Math.random() * 100}%`,
      width: `${Math.random() * 50 + 10}px`,
      height: `${Math.random() * 50 + 10}px`,
      animationDuration: `${Math.random() * 5 + 5}s`,
    }
  }
  return circles.value[index]
};

	 
 const handleLogin = async (e: any)=>{
	 uni.getUserProfile({
	   desc: '保存用户数据',
	   success: async ({
	    iv,
	    encryptedData
	   }) => {
	    var data = {
	     iv, 
	     loginType: 'mp',
	     encryptedData
	    }
	    // 2. 一键登录
	   let result = await cfsheep.$platform.useProvider().mobileWxLogin(data);
	    console.log('handleLogin',result)
	   if (result) {
	      cfsheep.$router.go("/pages/index/index");
	   }
	   },
	   fail(error) {
	    console.log('获取用户信息失败',error)
	   }
	 })
 }

  // 微信小程序的“手机号快速验证”：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
  const getPhoneNumber = async (e: any) => {
    uni.getUserProfile({
      desc: '保存用户数据',
      success: async ({
                        iv,
                        encryptedData
                      }) => {
        var data = {
          iv,
          loginType: 'mp',
          encryptedData
        }
        // 2. 一键登录
        let result = await cfsheep.$platform.useProvider().mobileWxLogin(data);
        console.log('handleLogin',result)
        if (result) {
          cfsheep.$router.go("/pages/index/index");
        }
      },
      fail(error) {
        console.log('获取用户信息失败',error)
      }
    })
  };

const openTerms = () => {
  uni.navigateTo({
    url: '/pages/terms/terms'
  })
};

const openPrivacy = () => {
  uni.navigateTo({
    url: '/pages/privacy/privacy'
  })
};

let animationInterval = null;

onMounted(() => {
  animationInterval = setInterval(() => {
    circles.value = []
  }, 10000)
});
 

onUnmounted(() => {
  clearInterval(animationInterval)
});
</script>

<style>
.container {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(to bottom, #e6f7ff, #e6fffb);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  position: relative;
  overflow: hidden;
}

.background-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
}

.background-circle {
  position: absolute;
  border-radius: 50%;
  background-color: #00ffff;
  animation: float 5s infinite alternate;
}

@keyframes float {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(0, 10px) rotate(360deg); }
}

.content {
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600rpx;
  margin-bottom: 60rpx;
}

.logo-container {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 30rpx;
}

.logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6rpx solid #00D886;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.welcome-text {
  font-size: 38rpx;
  font-weight: bold;
  /* color: #2e7d32; */
  margin-bottom: 40rpx;
  text-align: center;
}

.description-text {
  font-size: 24rpx;
  /* color: #388e3c; */
  margin-bottom: 60rpx;
  text-align: center;
}

.login-button {
  background-color: #4caf50;
  color: white;
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  font-weight: 600;
  font-size: 32rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wechat-icon {
  font-family: "iconfont";
  margin-right: 10rpx;
}

.footer-text {
  z-index: 10;
  margin-top: 60rpx;
  font-size: 24rpx;
  color: #388e3c;
  text-align: center;
  position: absolute;
  bottom: 40rpx;
  left: 0;
  right: 0;
}

.link {
  text-decoration: underline;
}

.decorative-circle {
  position: absolute;
  width: 200rpx;
  height: 200rpx;
  background-color: rgba(76, 175, 80, 0.1);
  border-radius: 50%;
  z-index: 0;
}

.bottom-left {
  bottom: -100rpx;
  left: -100rpx;
  animation: rotate 20s linear infinite;
}

.top-right {
  top: -100rpx;
  right: -100rpx;
  animation: rotate 25s linear infinite reverse;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 在 app.vue 的 style 部分添加以下代码 */
</style>